<template>
  <div>
    <h2>选择任意级别</h2>
    <p>当属性 check-strictly=true 时，任何节点都可以被选择，否则只有子节点可被选择。</p>
    <el-tree-select v-model="value" :data="data" check-strictly :render-after-expand="false" />
    <el-divider />
    <p>单选时属性selectedKeys可获得所有叶子节点Keys。</p>
    <el-tree-select v-model="value" :selected-keys.sync="selectedKeys" :data="data" check-strictly :render-after-expand="false" />
    <el-divider />
    show checkbox(only click checkbox to select):
    <el-tree-select v-model="value" :data="data" check-strictly :render-after-expand="false" show-checkbox />
    <el-divider />
    show checkbox with `check-on-click-node`:
    <el-tree-select v-model="value" :data="data" check-strictly :render-after-expand="false" show-checkbox
      check-on-click-node />
  </div>
</template>

<script>

export default {
  name: 'TreeSelectCheckStrictly',
  data() {
    return {
      value: '',
      selectedKeys: [],
      data: [
        {
          value: '1',
          label: 'Level one 1',
          children: [
            {
              value: '1-1',
              label: 'Level two 1-1',
              children: [
                {
                  value: '1-1-1',
                  label: 'Level three 1-1-1',
                },
              ],
            },
          ],
        },
        {
          value: '2',
          label: 'Level one 2',
          children: [
            {
              value: '2-1',
              label: 'Level two 2-1',
              children: [
                {
                  value: '2-1-1',
                  label: 'Level three 2-1-1',
                },
              ],
            },
            {
              value: '2-2',
              label: 'Level two 2-2',
              children: [
                {
                  value: '2-2-1',
                  label: 'Level three 2-2-1',
                },
              ],
            },
          ],
        },
        {
          value: '3',
          label: 'Level one 3',
          children: [
            {
              value: '3-1',
              label: 'Level two 3-1',
              children: [
                {
                  value: '3-1-1',
                  label: 'Level three 3-1-1',
                },
              ],
            },
            {
              value: '3-2',
              label: 'Level two 3-2',
              children: [
                {
                  value: '3-2-1',
                  label: 'Level three 3-2-1',
                },
              ],
            },
          ],
        },
      ]
    }
  },
  methods: {

  },
}
</script>